<template>
  <div id="box">
    <div style="margin-bottom: 20px;">
      <el-button v-has :type="type=='数据集成引擎'?'primary':''" @click="type='数据集成引擎'">数据集成引擎</el-button>
      <el-button v-has :type="type=='数据转换引擎'?'primary':''" @click="type='数据转换引擎'">数据转换引擎</el-button>
      <el-button v-has :type="type=='数据加载引擎'?'primary':''" @click="type='数据加载引擎'">数据加载引擎</el-button>
    </div>
    <div v-if="type=='数据集成引擎'">
      <el-table :data="tableData" border fit stripe highlight-current-row>
        <el-table-column v-for="(item,index) in tableHead" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template slot-scope="scope">
            <div v-if="item.title!='content'">{{scope.row[item.title]}}</div>
            <el-button v-else @click="connect(scope.$index)" :type="scope.row[item.title]?'primary':'danger'">
              {{scope.row[item.title]?'已连接':'未连接'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="type=='数据转换引擎'">
      <el-table :data="tableData1" border fit stripe highlight-current-row>
        <el-table-column v-for="(item,index) in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row[item.title]}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <el-button type="primary" size="mini" @click="change">开始转换</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="type=='数据加载引擎'">
      <el-table :data="tableData2" border fit stripe highlight-current-row>
        <el-table-column v-for="(item,index) in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template slot-scope="scope">
            <div>{{scope.row[item.title]}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <el-button type="primary" size="mini" @click="loading">开始加载</el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        load0: false,
        load1: false,
        load2: false,
        type: '数据集成引擎',
        tableHead: [{
            id: 1,
            label: '连接等级',
            title: 'grade'
          }, {
            id: 2,
            label: '连接名称',
            title: 'name'
          }, {
            id: 3,
            label: '连接类型',
            title: 'type'
          }, {
            id: 4,
            label: '主机名称',
            title: 'hostname'
          },
          {
            id: 5,
            label: '数据库名称',
            title: 'database'
          },
          {
            id: 6,
            label: '端口号',
            title: 'portNumber'
          },
          {
            id: 7,
            label: '操作',
            title: 'content'
          }
        ],
        tableData: [{
            grade: '一般',
            name: 'ordinary',
            type: 'MS-SQL-Server',
            hostname: '192.168.10.232',
            database: 'ordinary-database',
            portNumber: '9000',
            content: true
          },
          {
            grade: '高级',
            name: 'advanced',
            type: 'MS-SQL-Server(Native)',
            hostname: '192.168.10.50',
            database: 'advanced-database',
            portNumber: '8000',
            content: false
          },
          {
            grade: '选项',
            name: 'option',
            type: 'MariaDB',
            hostname: '192.168.10.20',
            database: 'option-database',
            portNumber: '3000',
            content: false
          },
          {
            grade: '连接池',
            name: 'connection-pool',
            type: 'MariaDB(SAP DB)',
            hostname: '192.168.10.50',
            database: 'connection-pool-database',
            portNumber: '6000',
            content: false
          },
          {
            grade: '集群',
            name: 'Cluster',
            type: 'MonetDB',
            hostname: '192.168.10.221',
            database: 'Cluster-database',
            portNumber: '7000',
            content: false
          }
        ],
        tableData1: [{
            name: '获取源数据1',
            contect: 'Oracle',
            SQL: 'e.ETPSID as id'
          },
          {
            name: '获取源数据2',
            contect: 'otherMySql',
            SQL: 'e.OPTO as yrgiz'
          },
          {
            name: '获取源数据3',
            contect: 'Oracle',
            SQL: 'q.CALSSIFY as gyzlx'
          },
        ],
        tableHead1: [{
            id: 1,
            label: '步骤名称',
            title: 'name'
          },
          {
            id: 2,
            label: '数据库连接',
            title: 'contect'
          },
          {
            id: 3,
            label: 'SQL语句',
            title: 'SQL'
          },
        ],
        tableHead2: [{
            id: 1,
            label: '连接等级',
            title: 'grade'
          },
          {
            id: 2,
            label: '标识符',
            title: 'Identifier'
          },
          {
            id: 3,
            label: '名称',
            title: 'name'
          },
        ],
        tableData2: [{
            grade: '一般',
            Identifier: '支持布尔数据类型',
            name: 'sjhdh-database'
          },
          {
            grade: '高级',
            Identifier: 'Supports this timestamp data type',
            name: 'uih-database'
          },
          {
            grade: '选项',
            Identifier: 'Supports this',
            name: 'trnh-database'
          },
        ],
        fullscreenLoading: false
      }
    },
    methods: {
      connect(index) {
        console.log(index)
        if (this.tableData[index].content) {
          this.$message({
            type: 'error',
            message: '断开连接成功'
          })
          this.tableData.forEach((elem, inde) => {
            elem.content = false
          })
        } else {
          this.$message({
            type: 'success',
            message: '连接成功'
          })
          this.tableData.forEach((elem, ind) => {
            if (index == ind) {
              elem.content = true
            } else {
              elem.content = false
            }
          })
        }
      },
      change() {
        this.$message({
          type: 'success',
          message: '转换成功'
        })
      },
      loading() {
        this.$message({
          type: 'success',
          message: '加载成功'
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  #box {
    padding: 30px;
  }
</style>
